<template>
    <div class="container">
        <h3>数据发送</h3>
        <el-row style="margin-top:20px;">
            <el-button class='theme-button' @click='dialogVisible=true' style="float:right;">新建发送</el-button>
        </el-row>

        <el-table
            :data="tableData"
            border
            style="margin-top:20px;"
            ref="multipleTable"
            header-cell-class-name="table-header"
            :header-cell-style="{ background:'rgba(2,179,134,0.1)'}"
        >
            <el-table-column prop="createTime" sortable label="发送时间"></el-table-column>
            <el-table-column prop="batch" sortable label="批号"></el-table-column>
            <el-table-column prop="breedName" sortable label="名称"></el-table-column>
            <el-table-column prop="spec" sortable label="规格"></el-table-column>
            <el-table-column prop="grade" sortable label="品类"></el-table-column>
            <el-table-column prop="number" sortable label="数量">
                <template slot-scope="scope">
                    {{scope.row.number}}袋
                </template>
            </el-table-column>
            <el-table-column prop="operator" sortable label="操作员"></el-table-column>
        </el-table>
        <el-pagination background layout="total, prev, pager, next, jumper" :page-size="pagesize" :current-page.sync="currentPage" :total="total"  @current-change="handleCurrentChange" style="margin-top:20px"></el-pagination>

        <el-dialog :visible.sync="dialogVisible" title='新建发送'>
            <el-form :model="form" ref="form" :rules='rules' label-width="100px" label-position="left">
                <el-form-item label="发送客户" prop="customer">
                    <el-input v-model="form.customer" placeholder="请输入客户"></el-input>
                </el-form-item>
                <el-form-item label="操作员：">
                    <el-input v-model="form.operator" disabled></el-input>
                </el-form-item>
                <el-form-item label="发送数量：" prop="number">
                    <el-input  v-model="form.number">
                        <template slot="append">袋</template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="way">
                    <el-radio label="1" v-model="form.way">单次发送</el-radio>
                    <el-radio label="2" v-model="form.way">批次发送</el-radio>
                </el-form-item>
                <el-form-item label="包装批号：" prop="batch">
                    <el-select style='width: 100%' v-model="batchItem" @change='selectChange'>
                        <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.batch"
                            :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label='基原：' v-if='batchItem'>
                    <span>{{batchItem.recallName}}</span>
                </el-form-item>
                <el-form-item label='规格：' v-if='batchItem'>
                    <span>{{batchItem.spec}}g</span>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click='dialogVisible=false'>取消</el-button>
                <el-button class='theme-button' @click='submit'>确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getBatchList, getSendDataList, sendData } from '@/request/api';

export default {
    data() {
        return {
            batchItem:'',
            options:[],
            dialogVisible:false,
            total:0,
            currentPage:1,
            pagesize:10,
            tableData: [],
            form: {
                customer:"",
                operator:'新绿色',
                number:'',
                way:'1',
                batch:'',
                breedName:'',
                spec:'',
                grade:''
            },
            rules:{
                customer: [{ required: true, message: '请输入客户', trigger: 'blur' }],
                number: [{ required: true, message: '请输入数量', trigger: 'blur' }],
                way: [{ required: true, message: '请选择', trigger: 'blur' }],
                batch: [{ required: true, message: '请选择', trigger: 'blur' }],
            }
        };
    },
    mounted(){
        this.getBatchList()
        this.getData()
    },
    watch:{
        dialogVisible(v){
            if(!v){
                console.log(v,'关闭');
                this.$refs.form.resetFields()
                this.batchItem = ''
            }
        }
    },
    methods: {
        submit(){
            this.$refs.form.validate(async valid => {
                if(valid){
                    const res = await sendData(this.form)
                    if(res.code == 200){
                        this.$message.success('发送成功')
                        this.dialogVisible = false
                        this.getData()
                    }
                }
            })
        },
        selectChange(v){
            this.form.batch = v.batch
            this.form.breedName = v.recallName
            this.form.spec = v.spec
            this.form.grade = v.grade
            console.log(this.form);

        },
        handleCurrentChange(val){
            this.currentPage = val
        },
        async getData(){
            let params = {
                page:this.currentPage,
                pageSize:this.pagesize
            }
            const res = await getSendDataList(params)
            if(res.code == 200){
                this.tableData = res.data.content
                this.total = res.data.totalElements
            }
        },
        async getBatchList(){
           const res = await getBatchList()
            if(res.code == 200){
                this.options = res.data
            }
        },


    }
}
</script>

<style scoped lang="less">
@import "@/assets/css/common";
.el-pagination{
    text-align: right !important;
}
/deep/.upload-daoru{
    background: #eee;
    .el-upload{
        border: none;
        width: auto;
        height: auto;
        border-radius: 0;
        float: right;
        margin-right: 10px
    }
}
.el-table{ margin-top: 20px;}
.el-pagination{
    text-align: center;
}
.el-pagination{
    text-align: center;
}
.el-col{
    margin-bottom:0;
}
</style>
